
// The tabPanel Object is stored here for later access
var tabPanel = 0;

Ext.onReady(function(){
	// Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	
	function createSiteNav_North(){
		var boxComponent = new Ext.BoxComponent({
			region:'north',
			el: 'toolbar',
			height:25
		});
		return boxComponent;
	}
	
	function createConsole_South(){
		return {
			region:'south',
			contentEl: 'south',
			split:true,
			height: 100,
			minSize: 100,
			maxSize: 200,
			collapsible: true,
			collapsed: true,
			hidden: true,
			title:'South',
			margins:'0 0 0 0'
		};
	}
	
	function createProperties_East(){
		return {
			region:'east',
			contentEl: 'south',
			split:true,
			height: 100,
			minSize: 100,
			maxSize: 200,
			collapsible: true,
			collapsed: true,
			hidden: true,
			title:'South',
			margins:'0 0 0 0'
		};
	}
	
	function createFileNav_West(){
		var treePanel = new Ext.tree.TreePanel({
			id: 'tree-panel',
			title: 'Navigation',
			region:'west',
			width: 150,
			split: true,
			collapsible: true,
			useArrows:true,
			autoScroll:true,
			animate:true,
			enableDD:true,
			containerScroll: true,

			// auto create TreeLoader
			dataUrl: '/files/',

			root: {
				nodeType: 'async',
				text: '/',
				draggable:false,
				id:'/'
			}
		});
		
		treePanel.on("dblclick", function(e){
			//var target = e.getTarget();
			fileManager.openFile(e.text);
		});
		
		treePanel.getRootNode().expand();

		return treePanel;
	}
	
	function createContent_Center(){
		tabPanel = new Ext.TabPanel({
			region: "center",
			resizeTabs:true, // turn on tab resizing
			
			enableTabScroll:true,
			width:600,
			height:250,
			defaults: {autoScroll:true},
		});
		return tabPanel;
	}
	
	function onNewFile(item){
      //  Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
		fileManager.newFile();
    }
	
	function onSaveFile(item){
      //  Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
		fileManager.saveCurrentFile();
    }
	
	function onDelete(item){
      //  Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
		fileManager.newFile();
    }
	
	function createMenus(){
		// Create Menu (See below where it is added to the toolbar)
		var menu = new Ext.menu.Menu({
        id: 'mainMenu',
        items: [
	            {
	                text: 'New File',
					handler: onNewFile
	            },
				'-',
				{
	                text: 'Save',
					handler: onSaveFile
	            },
	        ]
	    });

		// Create Toolbar
	    var tb = new Ext.Toolbar();
	    tb.render('toolbar');
		// Add the menu(Created above)
	    tb.add(
			/*{
				xtype: 'tbtext', 
				text: '<span class="logo" style="color: black">IDE</span><span>JS</span>'
			},*/
			{
				text:'File',
				iconCls: 'bmenu',  // <-- icon
				menu: menu  // assign menu by instance
		    },
			{
		        text: '<b>View</b>',
		        handler: function(){
		            window.location = "/view/?title="+fileManager.getCurrentFile();
		        }
			},
			'->',
			{
				xtype: 'tbtext', 
				text: USERNAME
			},
			{
		        text: '<b>Logout</b>',
		        handler: function(){
					
		            window.location = LOGIN_URL_HREF;
		        }
			}
		);
		
		// Create Log
		
	}
	
	var viewport = new Ext.Viewport({
		layout:'border',
		items:[
			createSiteNav_North(),
			createConsole_South(), 
			createProperties_East,
			createFileNav_West(),
			createContent_Center()
		 ]
	});
	
	createMenus();
	
	/*Ext.get("hideit").on('click', function() {
	   var w = Ext.getCmp('west-panel');
	   w.collapsed ? w.expand() : w.collapse(); 
	});*/
	// The action
    //Ext.QuickTips.init();

    

    

});